<div class="toolbar">
    <h4>多选与单选</h4>
    <p class="text-muted">多选/单选都是用于选项比较少时，方便快速填写表单</p>
</div>
<div class="p-2">
    <div class="card mb-2">
        <div class="card-header bg-white">
            单项选择 @Component
        </div>
        <div class="card-body">
            <p>选择器：
                <code>ts-radio </code>
                <ts-radio color="primary" [value]="1" [(ngModel)]="radioValue" [disabled]="true">Disabled&nbsp;</ts-radio>
                <ts-radio color="secondary" [value]="2" [(ngModel)]="radioValue">Secondary&nbsp;</ts-radio>
                <ts-radio color="danger" [value]="3" [(ngModel)]="radioValue">Danger&nbsp;</ts-radio>
                <ts-radio color="warning" [value]="4" [(ngModel)]="radioValue">Warning&nbsp;</ts-radio>
            </p>
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th scope="col">属性名称</th>
                        <th scope="col">类型</th>
                        <th scope="col">说明</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th scope="row">color</th>
                        <td>
                            <code>string</code>
                        </td>
                        <td>颜色设置，bootstrap的基础颜色[danger,light,info...]</td>
                    </tr>
                    <tr>
                        <th scope="row">value</th>
                        <td>
                            <code>any</code>
                        </td>
                        <td>选项的对应的值，当这个选项被选中时可以获取这个值</td>
                    </tr>
                    <tr>
                        <th scope="row">disabled</th>
                        <td>
                            <code>boolean</code>
                        </td>
                        <td>禁用</td>
                    </tr>
                    <tr>
                        <th scope="row">ngModel</th>
                        <td>
                            <code>any</code>
                        </td>
                        <td>支持双向绑定，设置、获取当前选中的值</td>
                    </tr>
                </tbody>
            </table>
            <table class="table table-striped mt-2">
                <thead>
                    <tr>
                        <th scope="col">事件名称</th>
                        <th scope="col">事件类型</th>
                        <th scope="col">说明</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th scope="row">checkedChange</th>
                        <td>
                            <code>boolean</code>
                        </td>
                        <td>每次选项状态改变时会触发，返回当前选中状态</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="card mb-2">
        <div class="card-header bg-white">
            多项选择 @Component
        </div>
        <div class="card-body">
            <p>选择器：
                <code>ts-checkbox </code>
                <ts-checkbox color="primary" [value]="1" [(ngModel)]="checkboxValues" [disabled]="true">Disabled&nbsp;</ts-checkbox>
                <ts-checkbox color="secondary" [value]="2" [(ngModel)]="checkboxValues">Secondary&nbsp;</ts-checkbox>
                <ts-checkbox color="danger" [value]="3" [(ngModel)]="checkboxValues">Danger&nbsp;</ts-checkbox>
                <ts-checkbox color="warning" [value]="4" [(ngModel)]="checkboxValues">Warning&nbsp;</ts-checkbox>
            </p>
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th scope="col">属性名称</th>
                        <th scope="col">类型</th>
                        <th scope="col">说明</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th scope="row">color</th>
                        <td>
                            <code>string</code>
                        </td>
                        <td>颜色设置，bootstrap的基础颜色[danger,light,info...]</td>
                    </tr>
                    <tr>
                        <th scope="row">value</th>
                        <td>
                            <code>any</code>
                        </td>
                        <td>选项的对应的值，当这个选项被选中时可以获取这个值</td>
                    </tr>
                    <tr>
                        <th scope="row">disabled</th>
                        <td>
                            <code>boolean</code>
                        </td>
                        <td>禁用</td>
                    </tr>
                    <tr>
                        <th scope="row">ngModel</th>
                        <td>
                            <code>any[]</code>
                        </td>
                        <td>支持双向绑定，设置、获取表单的值（是一个数组）</td>
                    </tr>
                </tbody>
            </table>
            <table class="table table-striped mt-2">
                <thead>
                    <tr>
                        <th scope="col">事件名称</th>
                        <th scope="col">事件类型</th>
                        <th scope="col">说明</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th scope="row">checkedChange</th>
                        <td>
                            <code>boolean</code>
                        </td>
                        <td>每次选项状态改变时会触发，返回当前选中状态</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="card">
        <div class="card-header bg-white">
            开关 @Component
        </div>
        <div class="card-body">
            <p>选择器：
                <code>ts-switch </code>
                <ts-switch [(ngModel)]="switchValue" [disabled]="true">Disabled&nbsp;</ts-switch>
                <ts-switch [(ngModel)]="switchValue" color="danger">Danger&nbsp;</ts-switch>
            </p>
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th scope="col">属性名称</th>
                        <th scope="col">类型</th>
                        <th scope="col">说明</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th scope="row">color</th>
                        <td>
                            <code>string</code>
                        </td>
                        <td>颜色设置，bootstrap的基础颜色[danger,light,info...]</td>
                    </tr>
                    <tr>
                        <th scope="row">values</th>
                        <td>
                            <code>{{'{'}} open: any, close: any {{'}'}}</code>
                        </td>
                        <td>开关的值，open为开关开启时的值，close为关闭时的值</td>
                    </tr>
                    <tr>
                        <th scope="row">disabled</th>
                        <td>
                            <code>boolean</code>
                        </td>
                        <td>禁用</td>
                    </tr>
                    <tr>
                        <th scope="row">ngModel</th>
                        <td>
                            <code>any</code>
                        </td>
                        <td>支持双向绑定，设置、获取当前选中的值</td>
                    </tr>
                </tbody>
            </table>
            <table class="table table-striped mt-2">
                <thead>
                    <tr>
                        <th scope="col">事件名称</th>
                        <th scope="col">事件类型</th>
                        <th scope="col">说明</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th scope="row">ngModelChange</th>
                        <td>
                            <code>any</code>
                        </td>
                        <td>每次开关状态改变时会触发，返回当前开关的值</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>